<template>
  <div>
    <div class="flex modular">
      <div
        v-for="(v, i) in pData.modularList"
        :key="i"
        class="page-bg"
        @click="router.push(v.path)"
      >
        <div class="b1">{{ v.name }}</div>
        <div class="b2">{{ v.count }}</div>
      </div>
    </div>
    <el-row :gutter="10">
      <el-col :lg="24" :xl="24">
        <div class="c1 page-bg flex">
          <div>
            <div class="b5">
              上次登录时间：{{
                dayjs(adminStore.info.login_time * 1000).format(
                  "YYYY-MM-DD HH:mm:ss"
                )
              }}
            </div>
            <div>
              <!-- 同步服务器图片的功能，是想让开发环境的图片跟生产环境的图片数据一致 -->
              <!-- <el-button size="large" type="primary" @click="asyncServerImg"
                >同步服务器图片文件</el-button
              > -->
              <el-button
                size="large"
                type="primary"
                @click="router.push('/pass')"
                >修改登录密码</el-button
              >
            </div>
          </div>
          <div class="b10">{{ time }}</div>
        </div>
      </el-col>
      <el-col :lg="12" :xl="12">
        <div class="c2 page-bg">
          <el-table :data="pData.list" style="width: 100%">
            <el-table-column prop="name" label="配置名称" width="220" />
            <el-table-column prop="value" label="配置数据" />
          </el-table>
        </div>
      </el-col>
      <el-col :lg="12" :xl="12">
        <div class="c2 page-bg">
          <el-table :data="pData.logList" style="width: 100%">
            <el-table-column prop="time" label="操作时间" width="180">
              <template #default="scope">
                {{ dayjs(scope.row.time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="管理员" width="120px" />
            <el-table-column prop="action" label="操作行为" />
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
export default {
  name: "home",
};
</script>

<script setup lang="ts">
import dayjs from "dayjs";
import { useAdminStore } from "@/store/user";
import { post } from "@/common/http";
import {
  ElMessageBox,
  ElMessage,
  version as elementVersion,
} from "element-plus";
import { version } from "vue";

const router = useRouter();
const adminStore = useAdminStore();

const time = ref("");
setInterval(() => {
  time.value = dayjs().format("HH:mm:ss");
}, 1000);

const pData = reactive<any>({
  list: [],
  logList: [],
  modularList: [],
});

post("api/Index/getHomeData").then((res) => {
  pData.list = res.data.sys_info.concat([
    { name: "VUE版本", value: version },
    { name: "Element-Plus", value: elementVersion },
  ]);
  pData.logList = res.data.log;
  pData.modularList = res.data.all_data;
});

//同步服务器 uploads 所有文件
function asyncServerImg() {
  ElMessageBox.alert("确定同步服务器文件？", "系统提示", {
    confirmButtonText: "确定",
    callback: (action: any) => {
      if (action == "confirm") {
        post("api/other/async_server_img").then((res) => {
          ElMessage.success("local同步成功");
        });
      }
    },
  });
}
</script>

<style scoped lang="scss">
@font-face {
  font-family: "DS-DIGIT";
  src: url("@/assets/DS-DIGIT.TTF");
}

.modular {
  justify-content: space-between;
  margin-bottom: 10px;
  .page-bg {
    width: calc(25% - 10px);
    cursor: pointer;
    .b1 {
      font-size: 18px;
      font-weight: bold;
      color: #666;
    }
    .b2 {
      text-align: right;
      font-size: 32px;
      padding-right: 10px;
      font-weight: bold;
      color: var(--el-color-primary);
    }
  }
}
.c1 {
  padding: 20px;
  margin-bottom: 10px;
  justify-content: space-between;
  .b5 {
    margin-bottom: 10px;
  }
  .b10 {
    font-family: "DS-DIGIT";
    font-size: 56px;
    font-weight: bold;
  }
}
.c2 {
  margin-bottom: 10px;
}
html.dark {
  .modular {
    .page-bg {
      .b1 {
        color: #fff;
      }
    }
  }
}
</style>
